<template>
	<!--数据统计-pop、道具列表-->
	<view class="page-content">
		<view class="page-top">
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- 返回+导航 -->
			<w-sel-search
			topType="four" 
			:is_tip="true" 
			:is_r_i="true" 
			@handleActive="handleActive">
			</w-sel-search>
		</view>
		<scroll-view class="page-body" :scroll-top="scrollTop" scroll-y="true" @scrolltolower="loadmore()">
			<template v-if="active===1">
				<!--公司列表-->
				<template v-if="sel_data && sel_data.length > 0 ">
					<view class="body-box">
						<block v-for="(item,index) in sel_data" :key="index">
							<view class="box-li">
								<pic-li :obj="item" :objstatu="user_statu" @toDet="toDet('pop',item.id)"></pic-li>
							</view>
						</block>
					</view>
					<!-- 上拉加载 -->
					<view class="det-con-more">
						<load-more :loadmore="load_more1"></load-more>
					</view>
				</template>
				<!--无数据-->
				<empty v-else no-full type="noData"></empty>
			</template>
			<template v-else-if="active===2">
				<!--供应商列表-->
				<template v-if="sel_data && sel_data.length > 0 ">
					<view class="body-box">
						<block v-for="(item,index) in sel_data" :key="index">
							<view class="box-li">
								<pic-li :obj="item" type="prop" :objstatu="user_statu" @toDet="toDet('prop',item.id)"></pic-li>
							</view>
						</block>
					</view>
					<!-- 上拉加载 -->
					<view class="det-con-more">
						<load-more :loadmore="load_more1"></load-more>
					</view>
				</template>
				<!--无数据-->
				<empty v-else no-full type="noData"></empty>
			</template>
		</scroll-view>
	</view>
</template>

<script>
	import wSelSearch from '@/components/w-sel-logo/w-sel-search.vue'; //标题+导航
	import loadMore from '@/components/uni-load-more/load-more.vue';
	import picLi from '@/pages/components/pic_book_li2.vue';
	export default {
		components: {
			loadMore,
			picLi,
			wSelSearch
		},
		data() {
			return {
				active:1,
				scrollTop: 0,
				noData: false,
				load_more1: '', //下拉加载文字
				load_sta: false, //是否是加载状态
				sel_data: [{
					id: 1,
					head_img: '/static/data-img/img.jpg',
					title: '旅游画册',
					statu: 1,
					money:'9999',
				}, {
					id: 2,
					head_img: '/static/data-img/img.jpg',
					title: '2020冬季新品海报2020冬季新品海报2020冬季新品海报2020冬季新品海报',
					statu: 1,
					money:'88888',
				}, {
					id: 3,
					head_img: '/static/data-img/img.jpg',
					title: '健身画册',
					statu: 1,
					money:'88888',
				}, {
					id: 4,
					head_img: '/static/data-img/img.jpg',
					title: '女装画册',
					statu: 1,
					money:'88888',
				}],
				page_type: '',
				userType:'', //system-首页 user-用户
				pageStatu: '0', //1-开权限 2-没有权限
				id: '',
				page_title: '',
				user_statu: {
					add_statu: false,
					replace_statu: false,
					stick_del_statu: false
				}
			}
		},
		onLoad(option) {
			console.log(222, option)
			if (option.type === '1') {
				this.page_type = '1';
				// 导航栏标题
				this.page_title = 'POP画册';
				if (option.pageStatu==='1') {
					this.pageStatu = option.pageStatu
					this.user_statu = {
						add_statu: true,
						replace_statu: true,
						stick_del_statu: true
					}
				}
				if(option.userType){
					this.userType = option.userType
				}
				
			} else if (option.type === '2') {
				this.page_type = '2';
				if (option.pageStatu==='1') {
					this.pageStatu = option.pageStatu
					this.user_statu = {
						add_statu: true,
						replace_statu: true,
						stick_del_statu: true
					}
				}
				// 导航栏标题
				this.page_title = 'POP下单';
				if(option.userType){
					this.userType = option.userType;
					// 导航栏标题
					this.page_title = 'POP下单管理';
				}
				
			} else if (option.type === '3') {
				this.page_type = '3';
				if (option.pageStatu==='1') {
					this.pageStatu = option.pageStatu
					this.user_statu = {
						add_statu: true,
						replace_statu: true,
						stick_del_statu: true
					}
				}
				// 导航栏标题
				this.page_title = '道具下单';
				if(option.userType){
					this.userType = option.userType
					// 导航栏标题
					this.page_title = '道具下单管理';
				}
				
			}
		},
		methods: {
			handleActive(e){
				console.log(44,e)
				this.active = e
			},
			//跳转详细页
			toDet(type,id) {
				uni.navigateTo({
					url:`/pages/picBook/statisticsDetail?id=${id}&type=${type}`
				})

			},
			
			//管理员替换封面
			replace_img(e) {

			},
			//删除
			deleted(e) {
				console.log(333, e)
			},
			//置顶
			checked(id, e) {
				if (this.sel_data && this.sel_data.length > 0) {
					this.sel_data.forEach(item => {
						if (item.id === id) {
							if (e === 1) {
								item.stick_statu = 2
							} else {
								item.stick_statu = 1
							}
						}
					})
				}
			},
			loadmore() {

			},
		}
	}
</script>

<style lang="scss">
	.titleNview-placing {
		height: var(--status-bar-height);
		box-sizing: content-box;
		background: $uni-bg-color;
		display: block;
		position: sticky;
		top: 0rpx;
		z-index: 9999;
		overflow: hidden
	}

	.page-content {
		width: 100vw;
		height: 100%;
		background: $uni-bg-color-grey;

		.page-top {
			display: flex;
			flex-direction: column;
			box-sizing: content-box;
			background: $uni-bg-color;
			display: block;
			position: sticky;
			top: 0rpx;
			z-index: 9999;
			border-bottom: 1rpx solid #F2F4F5;
		}

		.page-body {
			display: flex;
			height: calc(100% - 90rpx - var(--status-bar-height)) ;

			.body-box,
			.body-box2 {
				display: flex;
				flex-direction: column;
				margin-bottom: 20rpx;

				.box-li {
					padding: 30rpx 30rpx 20rpx 30rpx;
					background: $uni-bg-color;
					margin-bottom: 30rpx;
				}

				.box-li:last-of-type {
					border-bottom: none;
					margin-bottom: 0rpx;
				}
			}

			.con-text {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				color: #666;
				line-height: 50rpx;

				image {
					width: 100% !important;
					max-width: 100% !important;
				}
			}
		}
	}
</style>
